import React, { useState, useEffect, useRef } from 'react';
import { useLocation } from 'react-router-dom';
import { GenerationCard, UploadResult, LLMPanel, GenerationItem, notification } from '../components';
import { fadeIn, scaleIn, bounceIn } from '../utils/animations';
import { useComfyUI, TaskStatus } from '../contexts/ComfyUIContext';
import { lightCCApi } from '../services/lightcc-api';
import { historyManager, type GenerationHistoryItem } from '../services/historyManager';
import './Generate.css';

interface GenerateState {
  activeType: string;
  selectedFeature: string;
  selectedBusiness: string;
  uploadedImage?: string;
  referenceImage?: string;
  uploadedFile?: File;
  referenceFile?: File;
  prompt?: string;
  noiseLevel?: string;
  atmosphere?: string;
}

const Generate: React.FC = () => {
  const location = useLocation();
  const state = location.state as GenerateState;
  
  // ComfyUI相关状态
  const { currentTask, isGenerating, createTask } = useComfyUI();
  
  const [activeType, setActiveType] = useState<"image" | "video" | "migration" | "digital" | "action">((state?.activeType as "image" | "video" | "migration" | "digital" | "action") || "image");
  const [selectedFeature, setSelectedFeature] = useState(state?.selectedFeature || "手写提示词");
  const [selectedBusiness, setSelectedBusiness] = useState(state?.selectedBusiness || "瑜伽");
  const [result, setResult] = useState<string | null>(null);
  const [imagePreview, setImagePreview] = useState<string | null>(null);
  const [uploadedImage, setUploadedImage] = useState<string | null>(state?.uploadedImage || null);
  const [uploadedFile, setUploadedFile] = useState<File | null>(state?.uploadedFile || null);
  const [referenceImage, setReferenceImage] = useState<string | null>(state?.referenceImage || null);
  const [showLLMPanel, setShowLLMPanel] = useState(false);
  const [showUploadResult, setShowUploadResult] = useState(false);
  
  // 编辑模式状态管理
  const [editMode, setEditMode] = useState(false);
  const [editImageUrls, setEditImageUrls] = useState<string[]>([]);
  
  // 智能提示词状态管理
  const [smartPrompts, setSmartPrompts] = useState({
    stylePrompt: state?.prompt || '',
    colorPrompt: '',
    contentPrompt: ''
  });
  
  // 生成状态管理
  const [currentHistoryItem, setCurrentHistoryItem] = useState<GenerationHistoryItem | null>(null);
  const [historyList, setHistoryList] = useState<GenerationHistoryItem[]>([]);
  const currentTaskHistoryItemRef = useRef<GenerationHistoryItem | null>(null);
  const emptyStateRef = useRef<HTMLDivElement | null>(null);
  const generatingRef = useRef<HTMLDivElement | null>(null);
  const resultRef = useRef<HTMLDivElement | null>(null);

  // 滚动到页面底部的函数
  const scrollToBottom = () => {
    // 使用 requestAnimationFrame 确保DOM更新完成后再滚动
    requestAnimationFrame(() => {
      // 滚动到页面底部
      window.scrollTo({
        top: document.documentElement.scrollHeight,
        behavior: 'smooth'
      });
    });
  };

  // 页面加载动画
  useEffect(() => {
    if (emptyStateRef.current) {
      fadeIn(emptyStateRef.current, { delay: 0.3 });
    }
  }, []);

  // 页面初始化时加载历史记录
  useEffect(() => {
    // 检查存储空间使用情况
    const storageInfo = historyManager.getStorageInfo();
    console.log('存储空间使用情况:', {
      used: `${(storageInfo.used / 1024 / 1024).toFixed(2)}MB`,
      total: `${(storageInfo.total / 1024 / 1024).toFixed(2)}MB`,
      percentage: `${storageInfo.percentage}%`,
      itemCount: storageInfo.itemCount
    });
    
    // 如果存储空间使用超过50%，自动清理
    if (storageInfo.percentage > 50) {
      console.log('存储空间使用率过高，自动清理...');
      historyManager.cleanupStorage(15); // 保留最近15条记录
    }
    
    const loadedHistoryList = historyManager.getHistoryList();
    // 按时间倒序排列（最新的在最后）
    const sortedHistoryList = [...loadedHistoryList].sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime());
    setHistoryList(sortedHistoryList);
    
    if (sortedHistoryList.length > 0) {
      // 获取最新的历史记录项（排序后的最后一个）
      const latestItem = sortedHistoryList[sortedHistoryList.length - 1];
      setCurrentHistoryItem(latestItem);
      
      // 根据历史记录的状态设置结果状态
      if (latestItem.status === 'completed') {
        setResult('生成完成！');
        if (latestItem.generatedImages && latestItem.generatedImages.length > 0) {
          setImagePreview(latestItem.generatedImages[0]);
        }
      } else if (latestItem.status === 'failed') {
        setResult('生成失败');
      }
      
      console.log('加载历史记录:', latestItem);
    }
  }, []);

  // 生成状态动画
  useEffect(() => {
    if (isGenerating && generatingRef.current) {
      bounceIn(generatingRef.current);
    }
  }, [isGenerating]);

  // 结果状态动画
  useEffect(() => {
    if (result && resultRef.current) {
      scaleIn(resultRef.current, { delay: 0.2 });
    }
  }, [result]);

  // 处理图片上传
  const handleImageUpload = (imageUrl: string | null, file?: File) => {
    setUploadedImage(imageUrl);
    if (imageUrl === null) {
      // 图片被删除时，清空文件
      setUploadedFile(null);
    } else if (file) {
      // 图片上传时，设置文件
      setUploadedFile(file);
    }
    console.log('图片已上传:', imageUrl);
  };

  // 处理参考图上传
  const handleReferenceImageUpload = (imageUrl: string | null) => {
    setReferenceImage(imageUrl);
    console.log('参考图已上传:', imageUrl);
  };

  // 清空图片
  const handleClearImages = () => {
    setUploadedImage(null);
    setUploadedFile(null);
    setReferenceImage(null);
    setEditMode(false);
    setEditImageUrls([]);
    console.log('图片已清空');
  };

  // 处理智能提示词更新
  const handleSmartPromptUpdate = (smartPrompts: { stylePrompt: string; colorPrompt: string; contentPrompt: string }) => {
    setSmartPrompts(smartPrompts);
  };

  // 处理参考图片上传（暂时未使用）
  // const handleReferenceImageUpload = (imageUrl: string | null, file?: File) => {
  //   if (file) {
  //     setReferenceFile(file);
  //   }
  //   console.log('参考图片已上传:', imageUrl);
  // };

  // 监听ComfyUI任务状态变化
  useEffect(() => {
    if (currentTask && currentHistoryItem) {
      console.log('任务状态变化:', {
        taskStatus: currentTask.status,
        taskResult: currentTask.result,
        historyStatus: currentHistoryItem.status
      });

      // 如果任务有ID但历史记录中没有，更新历史记录
      if (currentTask.id && !currentHistoryItem.taskId) {
        console.log('更新历史记录中的任务信息:', {
          taskId: currentTask.id,
          workflowName: currentTask.workflowName,
          apiFilePath: currentTask.apiFilePath
        });
        
        // 直接更新当前历史记录项，避免调用 historyManager 导致存储问题
        const updatedItem = { 
          ...currentHistoryItem, 
          taskId: currentTask.id,
          apiFilePath: currentTask.apiFilePath || '',
          workflowName: currentTask.workflowName || ''
        };
        setCurrentHistoryItem(updatedItem);
        
        // 异步更新历史记录，避免阻塞
        setTimeout(() => {
          try {
            historyManager.updateTaskInfo(
              currentHistoryItem.id,
              currentTask.id,
              currentTask.apiFilePath || '',
              currentTask.workflowName || ''
            );
          } catch (error) {
            console.error('更新任务信息失败:', error);
          }
        }, 0);
      }
      
      // 防止重复更新：如果状态已经是完成状态，不再更新
      if (currentTask.status === TaskStatus.COMPLETED) {
        console.log('任务完成，结果:', currentTask.result);
        if (currentHistoryItem.status !== 'completed') {
          setResult('生成完成！');
          
          // 如果有结果图片，设置预览
          if (currentTask.result && currentTask.result.length > 0) {
            setImagePreview(currentTask.result[0]);
          }
          
          // 更新历史记录
          historyManager.updateHistoryItem(currentHistoryItem.id, {
            status: 'completed',
            uploadingStatus: '生成完成！',
            generatedImages: currentTask.result || []
          });
          
          // 更新当前历史记录项
          const updatedItem = { ...currentHistoryItem, 
            status: 'completed' as const,
            uploadingStatus: '生成完成！',
            generatedImages: currentTask.result || []
          };
          setCurrentHistoryItem(updatedItem);
          
          // 重新加载历史记录列表
          const updatedHistoryList = historyManager.getHistoryList();
          // 按时间倒序排列（最新的在最后）
          const sortedUpdatedList = [...updatedHistoryList].sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime());
          setHistoryList(sortedUpdatedList);
        }
        
      } else if (currentTask.status === TaskStatus.FAILED) {
        if (currentHistoryItem.status !== 'failed') {
          setResult(`生成失败: ${currentTask.error || '未知错误'}`);
          
          // 更新历史记录
          historyManager.updateHistoryItem(currentHistoryItem.id, {
            status: 'failed',
            uploadingStatus: `生成失败: ${currentTask.error || '未知错误'}`
          });
          
          // 更新当前历史记录项
          const updatedItem = { ...currentHistoryItem, 
            status: 'failed' as const,
            uploadingStatus: `生成失败: ${currentTask.error || '未知错误'}`
          };
          setCurrentHistoryItem(updatedItem);
          
          // 重新加载历史记录列表
          const updatedHistoryList = historyManager.getHistoryList();
          // 按时间倒序排列（最新的在最后）
          const sortedUpdatedList = [...updatedHistoryList].sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime());
          setHistoryList(sortedUpdatedList);
        }
        
      } else if (currentTask.status === TaskStatus.RUNNING) {
        if (currentHistoryItem.status !== 'uploading') {
          
          // 更新历史记录
          historyManager.updateHistoryItem(currentHistoryItem.id, {
            status: 'uploading',
            uploadingStatus: '正在生成中'
          });
          
          // 更新当前历史记录项
          const updatedItem = { ...currentHistoryItem, 
            status: 'uploading' as const,
            uploadingStatus: '正在生成中'
          };
          setCurrentHistoryItem(updatedItem);
          
          // 重新加载历史记录列表
          const updatedHistoryList = historyManager.getHistoryList();
          // 按时间倒序排列（最新的在最后）
          const sortedUpdatedList = [...updatedHistoryList].sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime());
          setHistoryList(sortedUpdatedList);
        }
      }
    }
  }, [currentTask]);

  // 如果有上传的图片，只设置图片状态，不自动生成
  useEffect(() => {
    if (state?.uploadedImage) {
      console.log('检测到传递的图片，设置图片状态');
      
      // 将 base64 图片转换为 File 对象
      const convertBase64ToFile = async (base64String: string) => {
        try {
          const response = await fetch(base64String);
          const blob = await response.blob();
          const file = new File([blob], 'canvas-image.png', { type: 'image/png' });
          setUploadedFile(file);
          return file;
        } catch (error) {
          console.error('转换图片失败:', error);
          return null;
        }
      };
      
      // 设置图片状态，但不自动生成
      if (state.uploadedImage.startsWith('data:')) {
        // 如果是 base64 图片（从画布保存的），需要转换为 File 对象
        convertBase64ToFile(state.uploadedImage);
      }
      
      // 设置图片预览
      setUploadedImage(state.uploadedImage);
    }
  }, [state?.uploadedImage]);

  const handleGenerate = async (params?: { noiseLevel?: string; atmosphere?: string; referenceFile?: File; referenceImageUrl?: string; prompt?: string }) => {

    try {
      // 1. 收集需要上传的图片
      const imagesToUpload: File[] = [];
      const uploadedImageResults: { fileName: string; url: string }[] = [];
      
      // 1.1. 处理原图
      if (uploadedImage && uploadedImage.startsWith('data:')) {
        // 优先使用涂抹后的图片（base64格式）
        const response = await fetch(uploadedImage);
        const blob = await response.blob();
        const file = new File([blob], 'canvas-image.png', { type: 'image/png' });
        imagesToUpload.push(file);
      } else if (uploadedFile) {
        // 使用原始上传的文件
        imagesToUpload.push(uploadedFile);
      } else if (state?.uploadedImage && state.uploadedImage.startsWith('data:')) {
        // 如果是从画布传递的base64图片
        const response = await fetch(state.uploadedImage);
        const blob = await response.blob();
        const file = new File([blob], 'canvas-image.png', { type: 'image/png' });
        imagesToUpload.push(file);
      } else {
        throw new Error('没有可用的图片进行生成');
      }
      
      // 1.2. 处理参考图（如果需要）
      if (params?.referenceFile) {
        imagesToUpload.push(params.referenceFile);
      }
      
      // 1.3. 批量上传所有图片到LightCC
      console.log(`开始上传 ${imagesToUpload.length} 张图片到LightCC...`);
      for (let i = 0; i < imagesToUpload.length; i++) {
        const uploadResult = await lightCCApi.uploadImage(imagesToUpload[i]);
        uploadedImageResults.push(uploadResult);
        console.log(`图片 ${i + 1} 上传成功:`, uploadResult.fileName, uploadResult.url);
      }
      
      // 1.4. 分配图片文件名和URL
      const imageFileName = uploadedImageResults[0]?.fileName; // 原图文件名
      const referenceImageFileName = uploadedImageResults[1]?.fileName; // 参考图文件名（如果有）
      const imageUrl = uploadedImageResults[0]?.url; // 原图URL
      const referenceImageUrl = uploadedImageResults[1]?.url; // 参考图URL（如果有）
      
      // 2. 创建临时历史记录项（用于跟踪当前任务）
      const localImageUrls: string[] = []; // 本地图片URL（用于显示）
      const lightccImageUrls: string[] = []; // LightCC图片URL（用于API调用）
      
      // 收集本地图片URL（用于显示）
      // 优先使用 uploadedImage（涂抹后的图片），然后使用 uploadedFile
      if (uploadedImage && uploadedImage.startsWith('data:')) {
        // 如果是base64格式的本地图片（包括涂抹后的图片）
        localImageUrls.push(uploadedImage);
      } else if (uploadedFile) {
        // 从 uploadedFile 创建本地URL
        const localUrl = URL.createObjectURL(uploadedFile);
        localImageUrls.push(localUrl);
      } else if (state?.uploadedImage && state.uploadedImage.startsWith('data:')) {
        // 如果是从画布传递的base64图片
        localImageUrls.push(state.uploadedImage);
      }
      
      // 添加参考图的本地URL（如果有的话）
      if (params?.referenceImageUrl) {
        localImageUrls.push(params.referenceImageUrl);
      }
      
      // 收集LightCC图片URL（用于API调用）
      if (imageUrl) {
        lightccImageUrls.push(imageUrl);
      }
      
      // 收集参考图URL（如果有的话）
      if (referenceImageUrl) {
        lightccImageUrls.push(referenceImageUrl);
      }
      
      // 4. 准备工作流参数
      // 处理智能提示词 - 优先使用传递过来的 prompt 参数
      let finalPrompt = '';
      
      if (params?.prompt) {
        // 如果传递了 prompt 参数，直接使用
        finalPrompt = params.prompt;
      } else {
        // 否则使用智能提示词模式：组合三个字段
        const smartPromptParts = [];
        if (smartPrompts.stylePrompt && smartPrompts.stylePrompt.trim()) {
          smartPromptParts.push(`风格：${smartPrompts.stylePrompt.trim()}`);
        }
        if (smartPrompts.colorPrompt && smartPrompts.colorPrompt.trim()) {
          smartPromptParts.push(`色调：${smartPrompts.colorPrompt.trim()}`);
        }
        if (smartPrompts.contentPrompt && smartPrompts.contentPrompt.trim()) {
          smartPromptParts.push(`固定内容：${smartPrompts.contentPrompt.trim()}`);
        }
        finalPrompt = smartPromptParts.join('，');
      }
      
      const historyId = await historyManager.createHistoryItem(localImageUrls, lightccImageUrls, {
        activeType,
        selectedFeature,
        selectedBusiness,
        isSmartPrompt: true, // 默认使用智能提示词模式
        prompt: finalPrompt // 使用处理后的finalPrompt
      });
      
      // 3. 获取创建的历史记录项
      const historyList = historyManager.getHistoryList();
      // 按时间倒序排列（最新的在最后）
      const sortedHistoryList = [...historyList].sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime());
      const newHistoryItem = sortedHistoryList.find(item => item.id === historyId);
      if (newHistoryItem) {
        setCurrentHistoryItem(newHistoryItem);
        setHistoryList(sortedHistoryList);
        // 保存当前历史记录项引用，用于错误处理
        currentTaskHistoryItemRef.current = newHistoryItem;
        // 滚动到底部显示新项目 - 延迟更长时间确保DOM完全更新
        setTimeout(scrollToBottom, 300);
      }
      
      const workflowParams = {
        prompt: params?.prompt || finalPrompt, // 优先使用传递的 prompt 参数
        imageName: imageFileName,
        referenceImageName: referenceImageFileName, // 传递参考图文件名
        imageNames: uploadedImageResults.map(result => result.fileName), // 传递所有图片文件名数组
        style: selectedBusiness,
        business: selectedBusiness,
        feature: selectedFeature,
        isSmartPrompt: !params?.prompt, // 如果没有传递 prompt 参数，则使用智能提示词模式
        noiseLevel: params?.noiseLevel, // 传递噪点参数
        atmosphere: params?.atmosphere // 传递氛围参数
      };
      
      console.log('工作流参数:', workflowParams);
      console.log('上传的图片数量:', uploadedImageResults.length);
      console.log('图片文件名数组:', uploadedImageResults.map(result => result.fileName));
      console.log('本地图片URLs (用于显示):', localImageUrls);
      console.log('LightCC图片URLs (用于API):', lightccImageUrls);
      
      // 5. 创建ComfyUI任务 - 只有成功后才显示GenerationItem
      // 添加 ComfyUI API 密钥
      const comfyApiKey = "comfyui-fa2ecfe15ffe89b2a8c5b8e9216a48cc7b5dae9ce1e095a004f4465a96a5827f";
      await createTask({ ...workflowParams, comfyApiKey });
      
      // 6. 任务创建成功
      
    } catch (error) {
      console.error('生成失败:', error);
      
      // 将当前任务状态改为失败
      if (currentTaskHistoryItemRef.current && currentTaskHistoryItemRef.current.id) {
        console.log('将任务状态改为失败:', currentTaskHistoryItemRef.current.id);
        historyManager.updateHistoryItem(currentTaskHistoryItemRef.current.id, {
          status: 'failed',
          uploadingStatus: `生成失败: ${error instanceof Error ? error.message : '未知错误'}`
        });
        
        // 更新当前历史记录项
        const updatedItem = { ...currentTaskHistoryItemRef.current, 
          status: 'failed' as const,
          uploadingStatus: `生成失败: ${error instanceof Error ? error.message : '未知错误'}`
        };
        setCurrentHistoryItem(updatedItem);
        
        // 重新加载历史记录列表
        const updatedHistoryList = historyManager.getHistoryList();
        // 按时间倒序排列（最新的在最后）
        const sortedUpdatedList = [...updatedHistoryList].sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime());
        setHistoryList(sortedUpdatedList);
      } else {
        // 如果 currentTaskHistoryItemRef.current 还没有设置，说明是在创建历史记录之前就失败了
        // 这种情况下不需要更新历史记录，因为还没有创建
        console.log('任务在创建历史记录之前就失败了，无需更新历史记录');
      }
      
      // 显示错误提示
      if (error instanceof Error && error.message.includes('执行任务已将达到上限')) {
        notification.error('任务队列已满，请等待当前任务完成后再试');
      } else {
        notification.error(`生成失败: ${error instanceof Error ? error.message : '未知错误'}`);
      }
    }
  };

  const handleEdit = (imageUrl: string, historyItem?: GenerationHistoryItem) => {
    console.log('编辑图片:', imageUrl);
    console.log('历史记录项:', historyItem);
    
    // 设置编辑模式
    setEditMode(true);
    
    // 如果有历史记录项，使用其图片URL数组
    if (historyItem && historyItem.imageUrls) {
      setEditImageUrls(historyItem.imageUrls);
      // 设置第一张图片为当前编辑的图片
      setUploadedImage(imageUrl);
      console.log('设置编辑图片URLs:', historyItem.imageUrls);
    } else {
      // 如果没有历史记录项，只设置单张图片
      setEditImageUrls([imageUrl]);
      setUploadedImage(imageUrl);
    }
    
    // 将 base64 图片转换为 File 对象
    if (imageUrl.startsWith('data:')) {
      const convertBase64ToFile = async (base64String: string) => {
        try {
          const response = await fetch(base64String);
          const blob = await response.blob();
          const file = new File([blob], 'edit-image.png', { type: 'image/png' });
          setUploadedFile(file);
        } catch (error) {
          console.error('转换图片失败:', error);
        }
      };
      convertBase64ToFile(imageUrl);
    }
  };

  const handleRegenerate = (historyItem?: GenerationHistoryItem) => {
    console.log('重新生成');
    setImagePreview(null);
    setResult(null);
    
    // 如果有历史记录项，设置编辑模式并加载图片
    if (historyItem && historyItem.imageUrls) {
      setEditMode(true);
      setEditImageUrls(historyItem.imageUrls);
      
      // 设置第一张图片
      if (historyItem.imageUrls[0]) {
        setUploadedImage(historyItem.imageUrls[0]);
      }
    }
    
    handleGenerate();
  };

  const handleDownload = () => {
    console.log('下载图片');
    // TODO: 实现下载功能
  };

  const handleShare = () => {
    console.log('分享图片');
    // TODO: 实现分享功能
  };

  const handleLLMSend = (message: string) => {
    console.log('LLM 消息:', message);
    // TODO: 实现 LLM 交互
  };

  const handleDeleteItem = (id: string) => {
    console.log('删除项目:', id);
    historyManager.deleteHistoryItem(id);
    const updatedHistoryList = historyManager.getHistoryList();
    // 按时间倒序排列（最新的在最后）
    const sortedUpdatedList = [...updatedHistoryList].sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime());
    setHistoryList(sortedUpdatedList);
    
    // 如果删除的是当前项目，清空当前项目
    if (currentHistoryItem && currentHistoryItem.id === id) {
      setCurrentHistoryItem(null);
    }
  };

  return (
    <main className="main-content">
      {/* 主内容区域 */}
      <div className="generate-main">
        {historyList.length > 0 ? (
          <div className="history-list">
            {historyList.map((item) => (
              <GenerationItem
                key={item.id}
                id={item.id}
                date={item.date}
                imageUrls={item.imageUrls}
                format={item.format}
                aspectRatio={item.aspectRatio}
                resolution={item.resolution}
                status={item.status}
                uploadingStatus={item.uploadingStatus}
                generatedImages={item.generatedImages}
                prompt={item.context.prompt}
                onEdit={item.status !== 'uploading' ? () => handleEdit(item.imageUrls[0], item) : undefined}
                onRegenerate={item.status !== 'uploading' ? () => handleRegenerate(item) : undefined}
                onDelete={handleDeleteItem}
                onImageClick={item.status === 'completed' ? (imageUrl, imageIndex) => {
                  console.log('点击了生成的图片:', imageUrl, imageIndex);
                  setImagePreview(imageUrl);
                  setShowUploadResult(true);
                } : undefined}
              />
            ))}
          </div>
        ) : (
          <div className="empty-state" ref={emptyStateRef}>
            <p className="empty-text">暂未找到相关内容</p>
          </div>
        )}
      </div>

      {/* 上传结果组件 - 只在有图片预览时显示 */}
      {showUploadResult && imagePreview && currentHistoryItem && (
        <UploadResult
          imagePreview={imagePreview}
          onEdit={() => handleEdit(imagePreview)}
          onRegenerate={handleRegenerate}
          onDownload={handleDownload}
          onShare={handleShare}
          onClose={() => setShowUploadResult(false)}
          isVisible={showUploadResult}
          prompt={currentHistoryItem.context.prompt}
          format={currentHistoryItem.format}
          aspectRatio={currentHistoryItem.aspectRatio}
          resolution={currentHistoryItem.resolution}
        />
      )}

      {/* LLM 面板 */}
      <LLMPanel
        isVisible={showLLMPanel}
        onClose={() => setShowLLMPanel(false)}
        onSendMessage={handleLLMSend}
      />

      {/* 底部输入框 */}
      <div className="generation-card-container">
        <GenerationCard
          activeType={activeType}
          setActiveType={setActiveType}
          selectedFeature={selectedFeature}
          setSelectedFeature={setSelectedFeature}
          selectedBusiness={selectedBusiness}
          setSelectedBusiness={setSelectedBusiness}
          onGenerate={handleGenerate}
          onOpenLLM={() => setShowLLMPanel(true)}
          onImageUpload={handleImageUpload}
          onReferenceImageUpload={handleReferenceImageUpload}
          uploadedImage={uploadedImage}
          referenceImage={referenceImage}
          onClearImages={handleClearImages}
          onSmartPromptUpdate={handleSmartPromptUpdate}
          editMode={editMode}
          editImageUrls={editImageUrls}
          width='42vw'
        />
      </div>
    </main>
  );
};

export default Generate;